<template>
    <div class="iframe-attr">
        <textarea :rows="5" placeholder="请输入" :id="iframe.getIframeUrlName()"></textarea>
        <div class="iframe-botton">
            <div class="botton" @click="iframe.setIframeUrl(currentElementList[0], '', true); history.addHistory(store.clone(), 119)">清 除</div>
            <div class="botton" @click="iframe.setIframeUrl(currentElementList[0], JQuery('#' + iframe.getIframeUrlName()).val(), false); history.addHistory(store.clone(), 46)">确 定</div>
        </div>
    </div>
</template>

<script>
import iframe from '@/js/main/attribute/iframe.js';
import store from '@/js/store/state.js';
import JQuery from 'jquery';
import history from '@/js/main/history.js';

export default {
    data() {
        return {
            iframe: iframe,
            JQuery: JQuery,
            history: history,
            store: store,
            currentElementList: store.getCurrentElementList()
        };
    },
    mounted() {
        iframe.setAttribute(this.currentElementList[0]);
    }
};
</script>

<style scoped lang="scss">
$background: #ffffff0f;
.iframe-attr {
    textarea {
        border: 1px solid $BorderColor;
        background: $background;
        padding: 5px;
        color: $FontWhite;
        width: 100%;
        border-radius: 3px;
    }
    .iframe-botton {
        display: flex;
        line-height: 60px;
        flex-direction: row;
        justify-content: flex-end;
        .botton {
            width: 50%;
            height: 25px;
            line-height: 25px;
            background: $background;
            margin: 10px 20px;
            color: $FontWhite;
            text-align: center;
            cursor: pointer;
        }
    }
}
</style>